<template>
	<view>
		<view class="top_scroll">
			<scroll-view enable-flex scroll-x class="scroll_box">
				<view class="scroll_item " v-for="item in scrollList" :key="item.id" @click="clickNav(item.id)">
					<view class="item" :class="item.id === navId ? 'active' : ''">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<view class="box" v-for="(item, index) in list" :key="index" @click="toCourseDetails(item)">
			<view class="info">
				<image :src="item.img.split(',')[0]" class="info_left"></image>
				<view class="info_right">
					<view class="title_box">
						<view class="title">{{ item.activity_name }}</view>
						<view class="status">{{ pay_status[item.activity_status] }}</view>
					</view>
					<view class="time_box">
						<!-- <view class="tag">报名截止时间</view> -->
						<view class="time">开始时间：{{ dateFormat(item.start_time) }}</view>
						<!-- <view class="class_hour">共{{item.class_num}}课节</view> -->
					</view>
					<view class="time_box">
						<!-- <view class="tag">报名截止时间</view> -->
						<view class="time">活动地址：{{ item.address_info }}</view>
						<!-- <view class="class_hour">共{{item.class_num}}课节</view> -->
					</view>
					<view class="teacher" style="color: #222;">
						<view>￥{{ item.pay_money }}</view>
					</view>
					<!-- <view class="student">
						支付状态:<text v-if="item.pay_status==1">已支付</text>
						<text v-if="item.pay_status==0">未支付</text>
					</view> -->
				</view>
			</view>
			<!-- <view class="btns">
				<view class="btn_box">
					<view v-if="item.activity_status == 0" class="btn1" @click="toApplyRefund(item)">申请取消</view> -->
					<!-- is_can_hx是否展示核销码1是0否  0'未开始',1'进程中',2'已结束'-->
					<!-- <view class="btn2" :style="{'opacity':item.is_can_hx==0?0.5:''}" @click="openHxm(item)">核销二维码</view> -->
					<!-- </view>
				<view class="btn3" v-if="item.verifiy_status==1" @click="openHxm">核销二维码</view> -->
					<!-- <view class="btn3" v-if="item.verifiy_status==0" @click="toPostComments">去支付</view> -->
				<!-- </view>
			</view> -->
		</view>
		<kong v-if="list.length == 0"></kong>

		<!-- 核销码 -->
		<uni-popup ref="hxm" background-color="#fff">
			<view class="popup_box">
				<view class="title_box">
					<text class="zw"></text>
					<text>核销二维码</text>
					<image src="../../static/off.png" @click="offHxm"></image>
				</view>
				<view class="popup_hxm">
					<image class="hxm" :src="qrcode"></image>
				</view>
				<view class="btns">
					<view class="btn1" @click="offHxm">取消</view>
					<view class="btn2">保存图片</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import kong from '../../components/kong.vue'
export default {
	components: {
		kong,
	},
	data() {
		return {
			scrollList: [{
				name: "全部",
				id: ''
			},
			{
				name: "未开始",
				id: 0
			},
			{
				name: "进程中",
				id: 1
			},
			{
				name: "已结束",
				id: 2
			},
			],
			pay_status: ['未开始', '进程中', '已结束'],//支付状态0'未开始',1'进程中',2'已结束'
			navId: '',
			list: [],
			page: 1,
			is_data: true,
			qrcode: '',//核销码
		}
	},
	onLoad(option) {
		// this.list = []
		this.id = option.id
		this.getlist(option.id)
		uni.$on('refund', () => {
			this.page = 1
			this.list = []
			this.getlist(this.id)
		})
	},
	onUnload() {
		uni.$off('refund')
	},
	onReachBottom() {
		this.is_data && this.getlist(this.navId)
	},
	methods: {
		// 跳转活动详情
		toCourseDetails(item) {
			if (item.pay_status == 1 || item.pay_status == 2) {// 0未支付 1已支付2部分退款3全部退款
				uni.navigateTo({
					url: '/pagemy/actorderinfo/actorderinfo?id=' + item.id
				})
			}
			if (item.pay_status == 3) {// 0未支付 1已支付2部分退款3全部退款
				uni.showToast({
					title: '该活动已完成售后',
					icon: 'none'
				})
			}
			if (item.pay_status == 0) {// 0未支付 1已支付2部分退款3全部退款
				uni.showToast({
					title: '该活动未支付，请重新下单',
					icon: 'none'
				})
			}
			// uni.navigateTo({
			// 	url:"pagemy/actorderinfo/actorderinfo?id="+item.id
			// })
		},
		// 跳转申请退款
		toApplyRefund(item) {
			uni.navigateTo({
				url: "/pages/applyRefund/applyRefund?type=1&id=" + item.id
			})
		},
		// 跳转发表评价
		toPostComments() {
			uni.navigateTo({
				url: "/pages/postComments/postComments"
			})
		},
		// 打开核销码弹窗
		openHxm(item) {
			if (item.is_can_hx == 1) {//is_can_hx是否展示核销码1是0否
				this.qrcode = item.qrcode
				this.$refs.hxm.open("center")
			}

		},
		// 关闭核销码
		offHxm() {
			this.$refs.hxm.close()
		},
		// 点击上方导航栏
		clickNav(id) {
			this.list = []
			this.page = 1
			this.navId = id
			this.getlist(id)
		},
		getlist(id) {
			this.$http({
				url: '/api/api/userActivity',
				data: {
					activity_status: id,//支付状态0未支付1已支付/待核销3已核销/待评价4已评价/已完成5已退款6已取消
					page_index: this.page,
					page_size: 20,
				}
			}).then(res => {
				if (res.data.length) {
					this.list.push(...res.data)
					this.page++
					return
				}
				this.is_data = false
			})
		},
		dateFormat: function (value) {
			var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear();
			var month = ("0" + (date.getMonth() + 1)).slice(-2);
			var sdate = ("0" + date.getDate()).slice(-2);
			var hour = ("0" + date.getHours()).slice(-2);
			var minute = ("0" + date.getMinutes()).slice(-2);
			var second = ("0" + date.getSeconds()).slice(-2);
			// 拼接
			var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
			// 返回
			return result;
		},
	}
}
</script>

<style lang="scss" scoped>
// 顶部导航栏
.top_scroll {
	width: 750rpx;
	height: 86rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	display: flex;
	margin-bottom: 20rpx;

	.scroll_box {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.scroll_item {
			width: calc(100% / 5);
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;

			.item {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.active {
				color: #FF6178;
				background: linear-gradient(#fff 0%, #fff 95%, #FFE6EB 95%, #FF8A9B 100%);
			}
		}
	}
}

// 
.box {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 36rpx 30rpx 0 30rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;

	.info {
		display: flex;
		justify-content: space-between;
		gap: 0 26rpx;
		padding-bottom: 30rpx;

		.info_left {
			width: 160rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 6rpx;
			flex-shrink: 0;
		}

		.info_right {
			width: 100%;
			display: flex;
			flex-direction: column;

			.title_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.title {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					line-height: 1em;
				}

				.status {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FF8A9B;
				}
			}

			.time_box {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				// justify-content: space-between;

				.tag {
					padding: 6rpx 6rpx 4rpx 6rpx;
					background: linear-gradient(180deg, #FCBB8C 0%, #FF8158 100%);
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 1em;
					border-radius: 4rpx 8rpx 8rpx 8rpx;
					margin-right: 18rpx;
				}

				.time {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
					// margin-right: 20rpx;
				}

				.class_hour {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					line-height: 1em;
				}
			}

			.teacher,
			.student {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #555555;
				line-height: 1em;
				display: flex;
				align-items: center;

				.studentitem {
					display: flex;
					width: 400rpx;

					>view {
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				>view {
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.teacher {
				margin-bottom: 20rpx;
			}
		}
	}

	.btns {
		width: 690rpx;
		height: 108rpx;
		border-top: 2rpx solid #ECECEC;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn_box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.btn1 {
			width: 320rpx;
			height: 68rpx;
			border-radius: 36rpx;
			border: 2rpx solid #888888;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn2 {
			width: 320rpx;
			height: 68rpx;
			background: #FF8A9B;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn3 {
			width: 690rpx;
			height: 68rpx;
			border-radius: 36rpx;
			border: 2rpx solid #888888;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

// 核销码弹框
.popup_box {
	width: 607rpx;
	height: 788rpx;
	background: #FFFFFF;
	border-radius: 14rpx;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;

	.title_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 128rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		flex-shrink: 0;

		.zw {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.popup_hxm {
		width: calc(100% - 138rpx);
		height: 100%;
		padding-top: 48rpx;
		box-sizing: border-box;
		margin: 0 auto;
		border-top: 2rpx solid #eee;
		display: flex;
		justify-content: center;

		.hxm {
			width: 428rpx;
			height: 428rpx;
		}
	}

	.btns {
		height: 140rpx;
		width: 100%;
		padding: 0 58rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn1 {
			width: 226rpx;
			height: 68rpx;
			border-radius: 36rpx;
			border: 2rpx solid #888888;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn2 {
			width: 226rpx;
			height: 68rpx;
			border-radius: 36rpx;
			background: #FF8A9B;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}</style>
